<script setup lang="ts">
import { useRoute } from 'vue-router'
import { computed } from 'vue'
import AppHeader from './components/AppHeader.vue'
import AppSidebar from './components/AppSidebar.vue'
const $route = useRoute()
const layoutVisible = computed(() => {
  // 只要是 /login 就不显示主菜单和头部
  return $route.path !== '/login'
})
</script>

<template>
  <div v-if="layoutVisible" class="app-container">
    <AppHeader />
    <AppSidebar />
    <main class="main-content">
      <router-view />
    </main>
  </div>
  <router-view v-else />
</template>

<style scoped>
.app-container {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.main-content {
  margin-left: var(--sidebar-width);
  margin-top: var(--header-height);
  width: calc(100vw - var(--sidebar-width));
  min-height: calc(100vh - var(--header-height));
  box-sizing: border-box;
  background: #f5f6fa;
  padding: 0;
  overflow: auto;
}
</style>
